<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>郑人客聊天界面100002</title>
<meta http-equiv="Cache-Control" content="must-revalidate,no-cache">
<link rel="stylesheet" href="css/chat.css">
<script type='text/javascript' src='./demo/javascript/dist/webim.config.js'></script>
<script type='text/javascript' src='./sdk/dist/strophe-1.2.8.min.js'></script>
<!--<script type='text/javascript' src='./sdk/dist/websdk-1.4.10.min.js'></script>-->
<script src='http://downloads.easemob.com/downloads/cdn/websdk-1.4.5.min.js'></script>
</head>
<body>
<header>
  <div class="head">
     <a class="back" href="javascript:history.back();"></a>
     <h1>郑人客100002</h1>
  </div>
</header>
<section class="chat_content">
<div class="historytime"><span id="time"></span></div>
    <ul class="content" id="msg-list">   
       
    </ul>
    
</section>

<div class="footer">   
    <button id="" name="" class="addbtn">
    <input type="file" accept="image/*"  multiple id="file" value='' style="filter:alpha(opacity=0);opacity:0;width:100%;height:100%;"/>  
    </button>
    <div class="text"><input id="msg-text" name="" placeholder="说点什么吧..." type="text"></div>
    <button id="" name="" class="addbtn2"></button>
    <button id="" name="" class="btn" onclick="sendPrivateText()">发送</button>   
	 <div class="biaoqing">
    <ul class="hidden">
    <li key="[):]" class="webim-emoji-item"><img src="demo/images/faces/ee_1.png"></li>
    <li key="[:D]" class="webim-emoji-item"><img src="demo/images/faces/ee_2.png"></li>
    <li key="[;)]" class="webim-emoji-item"><img src="demo/images/faces/ee_3.png"></li>
    <li key="[:-o]" class="webim-emoji-item"><img src="demo/images/faces/ee_4.png"></li>
    <li key="[:p]" class="webim-emoji-item"><img src="demo/images/faces/ee_5.png"></li>
    <li key="[(H)]" class="webim-emoji-item"><img src="demo/images/faces/ee_6.png"></li>
    <li key="[:@]" class="webim-emoji-item"><img src="demo/images/faces/ee_7.png"></li>
    <li key="[:s]" class="webim-emoji-item"><img src="demo/images/faces/ee_8.png"></li>
    <li key="[:$]" class="webim-emoji-item"><img src="demo/images/faces/ee_9.png"></li>
    <li key="[:(]" class="webim-emoji-item"><img src="demo/images/faces/ee_10.png"></li>
    <li key="[:'(]" class="webim-emoji-item"><img src="demo/images/faces/ee_11.png"></li>
    <li key="[:|]" class="webim-emoji-item"><img src="demo/images/faces/ee_12.png"></li>
    <li key="[(a)]" class="webim-emoji-item"><img src="demo/images/faces/ee_13.png"></li>
    <li key="[8o|]" class="webim-emoji-item"><img src="demo/images/faces/ee_14.png"></li>
    <li key="[8-|]" class="webim-emoji-item"><img src="demo/images/faces/ee_15.png"></li>
    <li key="[+o(]" class="webim-emoji-item"><img src="demo/images/faces/ee_16.png"></li>
    <li key="[<o)]" class="webim-emoji-item"><img src="demo/images/faces/ee_17.png"></li>
    <li key="[|-)]" class="webim-emoji-item"><img src="demo/images/faces/ee_18.png"></li>
    <li key="[*-)]" class="webim-emoji-item"><img src="demo/images/faces/ee_19.png"></li>
    <li key="[:-#]" class="webim-emoji-item"><img src="demo/images/faces/ee_20.png"></li>
    <li key="[:-*]" class="webim-emoji-item"><img src="demo/images/faces/ee_21.png"></li>
    <li key="[^o)]" class="webim-emoji-item"><img src="demo/images/faces/ee_22.png"></li>
    <li key="[8-)]" class="webim-emoji-item"><img src="demo/images/faces/ee_23.png"></li>
    <li key="[(|)]" class="webim-emoji-item"><img src="demo/images/faces/ee_24.png"></li>
    <li key="[(u)]" class="webim-emoji-item"><img src="demo/images/faces/ee_25.png"></li>
    <li key="[(S)]" class="webim-emoji-item"><img src="demo/images/faces/ee_26.png"></li>
    <li key="[(*)]" class="webim-emoji-item"><img src="demo/images/faces/ee_27.png"></li>
    <li key="[(#)]" class="webim-emoji-item"><img src="demo/images/faces/ee_28.png"></li>
    <li key="[(R)]" class="webim-emoji-item"><img src="demo/images/faces/ee_29.png"></li>
    <li key="[({)]" class="webim-emoji-item"><img src="demo/images/faces/ee_30.png"></li>
    <li key="[(})]" class="webim-emoji-item"><img src="demo/images/faces/ee_31.png"></li>
    <li key="[(k)]" class="webim-emoji-item"><img src="demo/images/faces/ee_32.png"></li>
    <li key="[(F)]" class="webim-emoji-item"><img src="demo/images/faces/ee_33.png"></li>
    <li key="[(W)]" class="webim-emoji-item"><img src="demo/images/faces/ee_34.png"></li>
    <li key="[(D)]" class="webim-emoji-item"><img src="demo/images/faces/ee_35.png"></li>
    </ul>
   </div>
   </div>
   </body>
<script type="text/javascript" src="./js/mlayer/jquery-1.11.0.js"></script>
		
		<script type="text/javascript" src="./js/mlayer/layer.js"></script>
		
		<script type="text/javascript">
		$(function(){

			var mydate = new Date();
			var t=mydate.toLocaleString();
			/*alert(t);*/
			$("#time").text(t);
			
		});
		
		$("#file").change(function(){
			sendPrivateImg();
		});    
			
		WebIM.Emoji = {
			    path: 'demo/images/faces/'  /*表情包路径*/
			    , map: {
			        '[):]': 'ee_1.png',
			        '[:D]': 'ee_2.png',
			        '[;)]': 'ee_3.png',
			        '[:-o]': 'ee_4.png',
			        '[:p]': 'ee_5.png',
			        '[(H)]':'ee_6.png',
			        '[:@]':'ee_7.png',
			        '[:s]':'ee_8.png',
			        '[:$]':'ee_9.png',
			        '[:(]':'ee_10.png',
			        "[:'(]":'ee_11.png',
			        '[:|]':'ee_12.png',
			        '[(a)]':'ee_13.png',
			        '[8o|]':'ee_14.png',
			        '[8-|]':'ee_15.png',
			        '[+o(]':'ee_16.png',
			        '[<o)]':'ee_17.png',
			        '[|-)]':'ee_18.png',
			        '[*-)]':'ee_19.png',
			        '[:-#]':'ee_20.png',
			        '[:-*]':'ee_21.png',
			        '[^o)]':'ee_22.png',
			        '[8-)]':'ee_23.png',
			        '[(|)]':'ee_24.png',
			        '[(u)]':'ee_25.png',
			        '[(S)]':'ee_26.png',
			        '[(*)]':'ee_27.png',
			        '[(#)]':'ee_28.png',
			        '[(R)]':'ee_29.png',
			        '[({)]':'ee_30.png',
			        '[(})]':'ee_31.png',
			        '[(k)]':'ee_32.png',
			        '[(F)]':'ee_33.png',
			        '[(W)]':'ee_34.png',
			        '[(D)]':'ee_35.png',
			    }
			};
		    
		    var zrkipu='100002';
		    var zrkipm='123456';
		    var zrkto='100000';
		
			var conn = new WebIM.connection({
			    https: WebIM.config.https,
			    url: WebIM.config.xmppURL,
			    isAutoLogin: WebIM.config.isAutoLogin,
			    isMultiLoginSessions: WebIM.config.isMultiLoginSessions
			});
			
			$(".webim-emoji-item").click(function(){
				var textmsg=document.getElementById("msg-text");
			    var msg_text =textmsg.value;
				var key=$(this).attr('key');
				key=msg_text+key;
				document.getElementById("msg-text").value=key;
			});
			
			var options = { 
			  apiUrl: WebIM.config.apiURL,
			  user: zrkipu,
			  pwd: zrkipm,
			  appKey: WebIM.config.appkey
			};
			conn.open(options);
			
			//发送文本消息
			var sendPrivateText = function () {
			    var id = conn.getUniqueId();                 // 生成本地消息id
			    var msg = new WebIM.message('txt', id);// 创建文本消息
			    var textmsg=document.getElementById("msg-text");
			    var msg_text =textmsg.value;
			    var msg_list=document.getElementById("msg-list");
			    if(msg_text==''){
			    	return false;
			    }
			    msg.set({
			        msg: msg_text,                  // 消息内容
			        to: zrkto,                   // 接收消息对象（用户id）
			        roomType: false,
			        success: function (id, serverMsgId) {
			        	
			        	msg_text=WebIM.utils.parseEmoji(msg_text);
			        	console.log(msg_text);
			        	$("#msg-list").append("<li><img class='imgright' src='images/chathead2.jpg'>"+
						"<div class='spanright'>"+msg_text+"</div></li>");
			        	textmsg.value='';
			        	
			        }
			    });
			    msg.body.chatType = 'singleChat';
			    conn.send(msg.body);
			};
			
			// 单聊发送图片消息
			var sendPrivateImg = function () {
			    var id = conn.getUniqueId();                   // 生成本地消息id
			    var msg = new WebIM.message('img', id);        // 创建图片消息
			    var input = document.getElementById('file');  // 选择图片的input
			    var file = WebIM.utils.getFileUrl(input);      // 将图片转化为二进制文件
			    
			    var allowType = {
			        'jpg': true,
			        'gif': true,
			        'png': true,
			        'bmp': true,
			        '':true,
			    };
			    if (file.filetype.toLowerCase() in allowType) {
			        var option = {
			            apiUrl: WebIM.config.apiURL,
			            file: file,
			            to: zrkto,                       // 接收消息对象
			            roomType: false,
			            chatType: 'singleChat',
			            onFileUploadError: function () {      // 消息上传失败
			                console.log('onFileUploadError');
			            },
			            onFileUploadComplete: function () {   // 消息上传成功
			                console.log('onFileUploadComplete');
			            },
			            success: function () {                // 消息发送成功
			            	console.log(file);
			            	$("#msg-list").append("<li><img class='imgright' src='images/chathead1.jpg'>"+
									"<div class='spanright'><img class='webim-msg-img' src='"+file.url+"'></div></li>");
			            	input.value='';
			            },
			            flashUpload: WebIM.flashUpload
			        };
			        msg.set(option);
			        conn.send(msg.body);
			    }
			};
			
			//var msg_list=document.getElementById("msg-list");
			conn.listen({
			    onOpened: function ( message ) {          //连接成功回调
			        // 如果isAutoLogin设置为false，那么必须手动设置上线，否则无法收消息
			        // 手动上线指的是调用conn.setPresence(); 如果conn初始化时已将isAutoLogin设置为true
			        // 则无需调用conn.setPresence();             
			    },  
			    onClosed: function ( message ) {},         //连接关闭回调
			    onTextMessage: function ( message ) {
			    	console.log(message);
			    	
			    	//document.getElementById("msg-list").append("<li>"+message.data+"</li>");
			    	$("#msg-list").append("<li><img class='imgleft' src='images/chathead1.jpg'>"+
					"<div class='spanleft'>"+message.data+"</div></li>");
			    },    //收到文本消息
			    onEmojiMessage: function ( message ) {
			    	console.log(message);
			    	console.log('Emoji');
			    	var data = message.data;
			    	var str='';
			        for(var i = 0 , l = data.length ; i < l ; i++){
			            if(data[i].type=='emoji'){
			            	str+="<img class='emoji' src='"+data[i].data+"'>";
			            }else if(data[i].type=='txt'){
			            	str+=data[i].data;
			            }
			        }
			        $("#msg-list").append("<li><img class='imgleft' src='images/chathead1.jpg'>"+
					"<div class='spanleft'>"+str+"</div></li>");
			    },   //收到表情消息
			    onPictureMessage: function ( message ) {
			    	console.log("Location of Picture is ", message.url);
			    	$("#msg-list").append("<li><img class='imgleft' src='images/chathead1.jpg'>"+
							"<div class='spanleft'><img class='webim-msg-img' src='"+message.url+"'></div></li>");
			    }, //收到图片消息
			    onCmdMessage: function ( message ) {},     //收到命令消息
			    onAudioMessage: function ( message ) {},   //收到音频消息
			    onLocationMessage: function ( message ) {},//收到位置消息
			    onFileMessage: function ( message ) {},    //收到文件消息
			    onVideoMessage: function (message) {
			        var node = document.getElementById('privateVideo');
			        var option = {
			            url: message.url,
			            headers: {
			              'Accept': 'audio/mp4'
			            },
			            onFileDownloadComplete: function (response) {
			                var objectURL = WebIM.utils.parseDownloadResponse.call(conn, response);
			                node.src = objectURL;
			            },
			            onFileDownloadError: function () {
			                console.log('File down load error.')
			            }
			        };
			        WebIM.utils.download.call(conn, option);
			    },   //收到视频消息
			    onPresence: function ( message ) {},       //收到联系人订阅请求、处理群组、聊天室被踢解散等消息
			    onRoster: function ( message ) {},         //处理好友申请
			    onInviteMessage: function ( message ) {},  //处理群组邀请
			    onOnline: function () {},                  //本机网络连接成功
			    onOffline: function () {},                 //本机网络掉线
			    onError: function ( message ) {},          //失败回调
			    onBlacklistUpdate: function (list) {       //黑名单变动
			        // 查询黑名单，将好友拉黑，将好友从黑名单移除都会回调这个函数，list则是黑名单现有的所有好友信息
			        console.log(list);
			    }
			    
			});
			
			
			//点击表情			
			$('.addbtn2').click(function(event) {
				event.stopPropagation();
				if($(this).siblings(".biaoqing").css("display") == 'none') {
					$(this).siblings(".biaoqing").show();
					//点击别的地方取消显示表情
				    /* $("body").click(function(event) {
						event.preventDefault();
						$(".biaoqing").hide();
					}) */
				//点击别的地方取消显示表情	
				} else {
					$(this).siblings(".biaoqing").hide();
				}
			})
			
		</script>

</html>
